import React from 'react'

import { Button, Checkbox, Form, Input,message } from 'antd';
import { loginApi } from '../apis/UserApi';
import './Login.css'
// 路由跳转

import {json, useNavigate} from 'react-router-dom';
export default function Login() {
  const navigate=useNavigate()
  const [loading,setLoading]=React.useState(false)
  const onFinish = (values) => {
    setLoading(true)
    console.log('Success:', values);

    // request('/users/login',{
    //   method:'post',
    //   body:values
    // })
    loginApi(values)
    .then(res=>{
      console.log("测试")
      setLoading(false)
      const {token,userInfo,permissions} = res;
      localStorage.token=token
      localStorage.userInfo=JSON.stringify(userInfo)
      localStorage.permissions=JSON.stringify(permissions)
      message.success('登录成功')
      navigate('/Home')
    })
    .catch(res=>{
      console.log("失败")
      setLoading(false)
    })

  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='main' > <Form className='form' 
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label={<div style={{color:"#fff"}}>账户名</div>}
      name="account"
      rules={[
        {
          required: true,
          message: '请输入你的名字!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label={<div style={{color:"#fff"}}>密码</div>}
      name="password"
      rules={[
        {
          required: true,
          message: '请输入密码!',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item
      name="remember"
      valuePropName="checked"
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Checkbox style={{color:"#fff"}}>记住密码</Checkbox>
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button loading={loading} type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form></div>
  )
}

